<template>
    <header>
        <van-nav-bar title="发布文章" left-text="返回" left-arrow @click-left="onClickLeft" />
    </header>
    <main>
        <ul>
            <li @click="active = i.id" :class="active == i.id ? 'active' : ''" v-for="i in topBarArr.arr">
                {{ i.type }}
            </li>
        </ul>
        <div class="input-box">
            <div class="title">
                <p>文章标题</p>
                <input type="text" v-model="title" />
                <div class="btn">
                    <van-button type="primary" size="small" @click="publish">发布文章</van-button>
                </div>
            </div>
            <div class="content">
                <p>文章内容</p>
                <textarea v-model="texts"></textarea>
            </div>
        </div>
        <div class="add-img" v-show="active != 7">
            <div class="add-box">
                <input ref="select" type="file" @change="upload" />
                <div class="bj">+</div>
                <p>添加图片</p>
            </div>
            <div class="img-list">
                <ul>
                    <li v-for="(i, index) in files">
                        <img :src="i.id" alt="" />
                        <div class="fun">
                            <van-icon name="search" @click="amplify(i.id)" />
                            <van-icon name="cross" @click="del(index)" />
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <div ref="wrap" class="big-img-wrap" @click="disappear">
            <div class="big-img">
                <img ref="bigImg" src="" alt="" />
            </div>
        </div>
    </main>
</template>

<script setup>
import { useRouter, useRoute } from "vue-router";
import { ref, reactive, getCurrentInstance } from "vue";
import axios from "axios";
import { topBar, uploadsApi, upEssay, getUserMsg } from "../api/api";
import { showSuccessToast, showFailToast } from "vant";
import { getUserData } from "@/fun/fun";
let router = useRouter();
let route = useRoute();
let vm = getCurrentInstance();
// 用户信息
let userData = reactive({ obj: {} });
// 返回上一页
const onClickLeft = () => router.go(-1);
// 选中分类高亮
let active = ref(2);
// 分类数据
let topBarArr = reactive({ arr: [] });
// 发布文章数据
let title = ref("");
let texts = ref("");
let files = reactive([]);
// 初始化用户数据
let getUserDataApi = () => {
    axios(getUserMsg(getUserData())).then(({ data }) => {
        userData.obj = reactive(data[0]);
    });
};
getUserDataApi();
// 获取分类选择
let topBarApi = () => {
    axios(topBar()).then(({ data }) => {
        topBarArr.arr = data.data.filter((i) => i.id != 0 && i.id != 1);
    });
};
topBarApi();
// 渲染图片
let upload = (event) => {
    if (!vm.refs.select.value) {
        return;
    }
    if (files.length >= 6) {
        // showSuccessToast("成功文案");
        showFailToast("一次最多只能上传6张图片哦！");
        return;
    }
    let fileInfo = event.target.files[0];
    if (fileInfo.type.split("/")[0] == "image") {
        let suffix = fileInfo.name.split(".")[1];
        if (suffix == "jpg" || suffix == "png" || suffix == "gif" || suffix == "jpeg" || suffix == "webp") {
            let fli = new FileReader();
            fli.readAsDataURL(event.target.files[0]);
            fli.onload = function () {
                files.push({ id: this.result, fileInfo });
                console.log(files);
            };
        } else {
            showFailToast("暂不支持该格式的文件");
            showFailToast("请上传jpg,png,gif,jpeg,webp格式的图片");
        }
    } else {
        showFailToast("选择的文件不是图片");
    }
};
// 发布文章
let publish = () => {
    if (!title.value) {
        showFailToast("标题不能为空！！");
        return;
    }
    if (!texts.value) {
        showFailToast("标题不能为空！！");
        return;
    }
    let pic = "";
    if (active.value != 7) {
        if (!files.length) {
            showFailToast("无图片文章请发文案分类");
            return;
        }
        pic = [];
        files.forEach((i) => {
            let formData = new FormData();
            formData.append("file", i.fileInfo);
            axios
                .post(uploadsApi(), formData, {
                    headers: {
                        "Content-Type": "multipart/form-data",
                    },
                })
                .then(({ data }) => {
                    pic.push(data.src);
                });
        });
    }
    let stype;
    stype = active.value;
    setTimeout(() => {
        axios
            .post(upEssay(), {
                title: title.value,
                content: texts.value,
                author: userData.obj.passname,
                authorId: userData.obj.id,
                pic,
                s: 0,
                etype: 1,
                stype,
            })
            .then(({ data }) => {
                if (data.s == 200) {
                    showSuccessToast("发布成功");
                    setTimeout(() => {
                        location.reload(true);
                    }, 500);
                } else {
                    showFailToast(data.m);
                }
            });
    }, 500);
};
// 大图显示
let amplify = (i) => {
    vm.refs.bigImg.src = i;
    vm.refs.wrap.style.display = " block";
};
// 回复小图
let disappear = () => {
    vm.refs.wrap.style.display = " none";
};
// 删除图片
let del = (i) => {
    files.splice(i, 1);
};
</script>

<style lang="scss" scoped>
main {
    margin-top: 10px;
    padding: 0 5vw;
    ul {
        display: flex;
        li {
            flex-grow: 1;
            font-size: 14px;
            height: 1.875rem;
            line-height: 1.875rem;
            text-align: center;
        }
        li.active {
            background-color: #1989fa;
            color: #fff;
        }
    }
    .input-box {
        .title {
            margin-top: 0.625rem;
            position: relative;
            input {
                margin-top: 5px;
                width: 60vw;
                border: none;
                border-bottom: 1px solid #999;
            }
            .btn {
                position: absolute;
                right: 0;
                top: 0;
            }
        }
        .content {
            margin-top: 10px;
            textarea {
                margin-top: 5px;
                width: 100%;
                height: 20vh;
                resize: none;
                border: 1px solid #999;
                padding: 5px;
                border-radius: 5px;
                box-sizing: border-box;
            }
        }
        p {
            font-weight: 600;
            font-size: 18px;
        }
    }
    .add-box {
        margin-top: 10px;
        position: relative;
        height: 50px;
        input {
            width: 50px;
            height: 50px;
            opacity: 0;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 999;
        }
        .bj {
            width: 50px;
            height: 50px;
            font-size: 36px;
            text-align: center;
            line-height: 50px;
            color: #999;
            border: 1px #999 dotted;
            position: absolute;
            top: 0;
            left: 0;
        }
        p {
            margin-left: 60px;
            line-height: 40px;
            font-weight: 600;
        }
    }
    .img-list {
        ul {
            flex-wrap: wrap;
            li {
                position: relative;
                margin-right: 0.1875rem;
                margin-top: 10px;
                width: 6.6875rem;
                height: 6.6875rem;
                flex-grow: 0;
                overflow: hidden;
                display: flex;
                align-items: center;
                border: 1px #ccc dotted;
                img {
                    width: 100%;
                }

                .fun {
                    position: absolute;
                    width: 40px;
                    display: flex;
                    justify-content: space-between;
                    right: 10px;
                    top: 10px;
                    font-weight: 600;
                }
            }
        }
    }
    .big-img-wrap {
        display: none;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba($color: #000000, $alpha: 0.4);
        .big-img {
            width: 90%;
            height: 50vh;
            background-color: #fff;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            border-radius: 20px;
            overflow: hidden;
            img {
                width: 100%;
                margin-top: 30px;
            }
        }
    }
}
</style>
